import {PageContainer} from "@ant-design/pro-layout";
import ProCard from "@ant-design/pro-card";
import ProTable, {ProTableProps} from "@ant-design/pro-table";
import {AuthButtonProps} from "@/pages/system/menu/authButton/interfaces";
import {columns} from "@/pages/system/menu/authButton/config/columns";
import AddSysMenu from "@/pages/system/menu/list/components/AddSysMenu";
import {Button, message} from "antd";
import {SysMenuAdd} from "@/pages/system/menu/type";
import {sysMenuAdd, sysMenuPageList} from "@/services/system/menu/api";
import {ModalFormProps} from "@ant-design/pro-form/lib/layouts/ModalForm";
import React, {useRef} from "react";
import {ProFormInstance} from "@ant-design/pro-form";
import {ActionType} from "@ant-design/pro-table/lib/typing";
import {history} from "umi";

export default (props: AuthButtonProps) => {
  const actionRef = useRef<ActionType>();
  const sysMenuAddRef: React.MutableRefObject<ProFormInstance<SysMenuAdd> | undefined> = useRef<ProFormInstance<SysMenuAdd> | undefined>();
  // @ts-ignore
  const menuId: number = history?.location?.query?.menuId;
  const modalFormProps: ModalFormProps = {
    trigger: <Button type="primary">新增</Button>,
    onFinish: async (formData) => {
      await sysMenuAddRef.current?.validateFields().then(res => {
        const data: SysMenuAdd = {
          ...formData as SysMenuAdd,
          pid: menuId,
          menu: !!(formData as SysMenuAdd).route,
        }
        sysMenuAdd(data).then(res => {
          message.success("新增成功")
          sysMenuAddRef.current?.resetFields();
          actionRef.current?.reload();
        })
      })
      return true
    },
    formRef: sysMenuAddRef,
    title: "新增按钮",
  }
  const tableProps: ProTableProps<any, any> = {
    tableAlertRender: ({selectedRowKeys, selectedRows, onCleanSelected}) => null,
    tableAlertOptionRender: () => null,
    // toolBarRender: false,
    options: false,
    tableStyle: {},
    pagination: {defaultPageSize: 10},
    bordered: true,
    search: false,
    columns,
    headerTitle: (
      <AddSysMenu {...modalFormProps} button={true}/>
    ),
    actionRef,
    request: async (params, sort, filter) => {
      return await sysMenuPageList({...params, button: true, id: menuId}).then(res => {
        return {
          data: res.data,
          success: true,
        }
      })
    },
  }
  return (
    <PageContainer>
      <ProCard>
        <ProTable {...tableProps}>
        </ProTable>
      </ProCard>
    </PageContainer>
  )
}
